<template>
  <div id="Settle">
    <div class="nav">
      <p>入驻管理</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>招商管理</el-breadcrumb-item>
        <el-breadcrumb-item>过程管理</el-breadcrumb-item>
        <el-breadcrumb-item>入驻管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 搜索 -->
    <div class="head">
      <el-input v-model="input" placeholder="搜索关键字"></el-input>
      <el-select v-model="input" filterable placeholder="状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="input"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" class="search" icon="el-icon-search"
        >搜索</el-button
      >
      <el-button type="primary" class="reset" icon="el-icon-refresh"
        >重置</el-button
      >
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="nav-list">
        <p class="list">查询结果列表</p>
        <el-button type="primary" class="add" @click="addDialog = true"
          >登记</el-button
        >
      </div>
      <el-table :data="tableData" stripe style="width: 100%" align="center">
        <el-table-column prop="id" label="序号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="userNumber" label="客户名称" align="center" width="120">
        </el-table-column>
        <el-table-column prop="userName" label="合同编号" align="center" width="120">
        </el-table-column>
        <el-table-column prop="createTime" label="登记时间" align="center">
          <template slot-scope="scope">
            <span>{{ timeTrans(scope.row.createTime, 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="personSex" label="入驻人数" align="center" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="入驻负责人" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="入驻房号" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="状态" align="center">
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span
              style="color: #0bb197; margin-right: 10px"
              @click="see(scope.$index)"
              >查看</span
            >
            <span @click="revoke(scope.$index)" style="color: #0bb197">{{
              scope.row.tatus == 0 ? "撤销" : ""
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>

    <!-- 协定 -->
    <div class="addSettle">
      <el-dialog title="入驻登记" :visible.sync="addDialog">
        <el-form :model="addData">
          <div class="form">
            <div>
              <el-form-item
                label="客户名称"
                :label-width="formLabelWidth"
              >
              <el-select
                v-model="addData.calculationrulesId"
                placeholder="请选择"
              >
                <el-option label="每天" value="0"></el-option>
                <el-option label="每周" value="1"></el-option>
              </el-select></el-form-item>
              
              <el-form-item label="入驻时间" :label-width="formLabelWidth">
                 <el-input
                v-model="addData.integralsetNumber"
                autocomplete="off"
              ></el-input>
              </el-form-item>
             
                 <el-form-item
                label="入驻负责人"
                :label-width="formLabelWidth"
              >
              <el-select
                v-model="addData.calculationrulesId"
                placeholder="请选择"
              >
                <el-option label="每天" value="0"></el-option>
                <el-option label="每周" value="1"></el-option>
              </el-select></el-form-item>
              
                <el-form-item
                label="入驻房间"
                :label-width="formLabelWidth"
              >
               <el-select
                v-model="addData.calculationrulesId"
                placeholder="请选择"
              >
                <el-option label="每天" value="0"></el-option>
                <el-option label="每周" value="1"></el-option>
              </el-select></el-form-item>
             
            </div>
            <div>
             <el-form-item
                label="合同名称"
                :label-width="formLabelWidth"
              >
               <el-select
                v-model="addData.calculationrulesId"
                placeholder="请选择"
              >
                <el-option label="每天" value="0"></el-option>
                <el-option label="每周" value="1"></el-option>
              </el-select>
              </el-form-item>
             
                 <el-form-item
                label="入驻人数"
                :label-width="formLabelWidth"
              >
               <el-select
                v-model="addData.calculationrulesId"
                placeholder="请选择"
              >
                <el-option label="每天" value="0"></el-option>
                <el-option label="每周" value="1"></el-option>
              </el-select></el-form-item>
             
              <el-form-item label="联系电话" :label-width="formLabelWidth">
                 <el-input
                v-model="addData.integralsetNumber"
                autocomplete="off"
              ></el-input>
              </el-form-item>
             
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false" class="cancel">取 消</el-button>
          <el-button class="footer" type="primary" @click="add"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <!-- 查看 -->
    <div class="detail">
      <el-dialog title="详情信息" :visible.sync="seeDialog">
        <el-form :model="seeData">
          <div class="form">
            <div class="detail-left">
              <el-form-item label="客户名称:" :label-width="formLabelWidth">
                <span>{{ seeData.userNumber }}</span>
              </el-form-item>
              <el-form-item label="入驻时间:" :label-width="formLabelWidth">
                <span>{{ seeData.personSex }}</span>
              </el-form-item>
              <el-form-item label="入驻负责人:" :label-width="formLabelWidth">
                <span>{{ seeData.createTime }}</span>
              </el-form-item>
              <el-form-item label="入驻房号:" :label-width="formLabelWidth">
                <span>{{ seeData.typeValue }}</span>
              </el-form-item>
              <el-form-item label="状态:" :label-width="formLabelWidth">
                <span>{{ seeData.typeValue }}</span>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="合同名称:" :label-width="formLabelWidth">
                <span>{{ seeData.userNumber }}</span>
              </el-form-item>
              <el-form-item label="入驻人数:" :label-width="formLabelWidth">
                <span>{{}}</span>
              </el-form-item>
              <el-form-item label="联系电话:" :label-width="formLabelWidth">
                <span>{{}}</span>
              </el-form-item>
              <el-form-item label="备注说明:" :label-width="formLabelWidth">
                <span>{{}}</span>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import time from "../utils/time";
export default {
  mixins: [time],
  data() {
    return {
      input: "",
      page: 1,
      count: 5,
      total: 1,
      tableData: [],
      seeData: {},
      addData: {},
      formLabelWidth: "120px",
      seeDialog: false,
      addDialog: false,
      options: [],
      currentPage4: 1,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    getData: function () {
      this.$axios({
        url: "/smart/integral/integrals",
        method: "get",
        params: {
          pageNum: this.page,
          pageSize: this.count,
        },
      }).then(({ data }) => {
        if (data.code == 0) {
          this.tableData = data.integrals;
          console.log("32", data.integrals[0].integralType.typeName);
        } else {
          this.$message.error("加载失败");
        }
      });
    },
    add: function () {
      this.$axios({
        url: "",
        method: "",
      }).then(({ data }) => {
        this.addDialog = false;
      });
    },
    see(index) {
      this.seeDialog = true;
      this.$axios({
        url: "/smart/integral/integral/" + this.tableData[index].id,
        method: "get",
      }).then(({ data }) => {
        if (data.code == 2000) {
          this.seeData = data.integral;
          console.log("90", data.integral);
        } else {
          this.$message.error("查看失败");
        }
      });
    },
  },
  mounted: function () {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#Settle {
  height: 100px;
  color: black;
  padding: 20px;
}
.nav {
  display: flex;
  justify-content: space-between;
}

.head {
  background: white;
  height: 80px;
  width: 100%;
  margin: 20px 0px 20px 0;
  display: flex;
  align-items: center;
  border-radius: 6px;
}
.el-input,
.el-select {
  width: 180px;
  margin: 5px;
}
.el-button {
  padding: 11px;
  width: 80px;
  margin: 0 5px 0 10px;
}
.nav-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0 20px 0;
}
.search,
.add {
  background: #0bb197;
  border: 1px solid #0bb197;
  height: 40px;
}
.reset {
  background: white;
  color: #c0c4cc;
  border: 1px solid #dcdfe6;
}
.reset:hover {
  color: #0bb197;
}
.list {
  font-size: 14px;
  font-weight: 600;
  padding: 20px 0 10px 0;
}
.content {
  background: white;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 6px;
}
.el-pagination {
  height: 100px;
  margin-top: 30px;
  text-align: right;
}
.form {
  display: flex;
  justify-content: space-between;
}
.dialog-footer {
  text-align: center;
  .footer {
    background: #0bb197;
    border: 1px solid #0bb197;
  }
  .cancel:hover {
    color: #0bb197;
    border: 1px solid #0bb197;
  }
}
</style>
<style lang="less">
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #0bb197;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0bb197;
  color: #fff;
}
.detail {
  .el-dialog__header {
    background-color: #0bb197;
  }
  .el-dialog__title {
    color: white;
  }
  .el-form-item__label,
  .el-form-item__content {
    text-align: left;
    line-height: 25px;
    margin: 0px;
  }
  .el-form-item__content {
    text-align: right;
  }
}
.addSettle {
  .el-input__inner,
  .el-form-item__label {
    height: 32px;
    line-height: 32px;
    // text-align: left;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .shuoming {
    width: 700px;
  }
  .el-input {
    margin: 0px;
  }
}
</style>